<template>
  <div class="vip">
    <h1>会员管理</h1>
    <div class="search">
      <!-- <el-input
        v-model="queryInfo.vipCardId"
        placeholder="会员卡号"
        clearable
        @input="getVip"
      ></el-input> -->
      <el-input
        v-model="queryInfo.name"
        placeholder="姓名"
        clearable
        @input="getVip"
      ></el-input>
      <el-input
        v-model="queryInfo.phone_number"
        placeholder="电话号码"
        clearable
        @input="getVip"
      ></el-input>
      <el-button @click="dialogFormVisible = true">增加用户</el-button>
      <el-button icon="el-icon-delete" @click="batchDelete(deleteIds)"
        >批量删除</el-button
      >
    </div>

    <!-- 展示 -->
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="450"
        @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="selection" width="45"> </el-table-column>
        <el-table-column
          type="index"
          :index="1 + (queryInfo.page - 1) * queryInfo.size"
          label="编号"
          width="60"
        >
        </el-table-column>
        <el-table-column prop="id_card" label="会员卡号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="会员名字" width="180"> </el-table-column>
        <el-table-column prop="phone_number" label="会员电话"> </el-table-column>
        <el-table-column prop="total_consumption" label="交易总额(元)" sortable>
        </el-table-column>
        <el-table-column prop="shipping_time" label="购物次数" sortable>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 删除 -->
            <i
              class="icon-shanchu iconfont"
              style="color: red; margin-right: 5px"
              @click="deleteVip(scope.row.id)"
            ></i>
            <!-- 修改 -->
            <i
              class="icon-xiugai2 iconfont"
              style="color: #4064e1"
              @click="showUpdateDialog(scope.row.id)"
            ></i>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="queryInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 添加用户对话框 -->
    <el-dialog
      title="添加vip用户"
      :visible.sync="dialogFormVisible"
      center
      @close="addDialogClose"
    >
      <el-form :model="addform" ref="addform" :rules="addRules">
        <!-- <el-form-item label="会员卡号" :label-width="formLabelWidth" prop="id_card">
          <el-input
            v-model="addform.id_card"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item> -->
        <el-form-item
          label="会员名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="addform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="会员电话"
          :label-width="formLabelWidth"
          prop="phone_number"
        >
          <el-input v-model="addform.phone_number" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addVip()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog
      title="修改vip用户信息"
      :visible.sync="updateDialogVisible"
      center
    >
      <el-form :model="updateForm" :rules="updateFormRulues" ref="updateForm">
        <el-form-item
          label="会员卡号"
          :label-width="formLabelWidth"
          prop="id_card"
        >
          <el-input
            v-model="updateForm.id_card"
            autocomplete
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          label="会员名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="updateForm.name" autocomplete></el-input>
        </el-form-item>
        <el-form-item
          label="会员电话"
          :label-width="formLabelWidth"
          prop="phone_number"
        >
          <el-input v-model="updateForm.phone_number" autocomplete></el-input>
        </el-form-item>
        <!-- <el-form-item
          label="卡内积分"
          :label-width="formLabelWidth"
          prop="integral"
        >
          <el-input v-model="updateForm.integral" autocomplete></el-input>
        </el-form-item>
        <el-form-item
          label="购物次数"
          :label-width="formLabelWidth"
          prop="shipping_time"
        >
          <el-input v-model="updateForm.shipping_time" autocomplete></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeUpdateDialog">取 消</el-button>
        <el-button type="primary" @click="updateVip()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getVipList, getVipDetail,editVip,createVip,delVip,batchDelVip } from "@/api/vip";
export default {
  data() {
    return {
      tableData: [],
      //查询信息实体
      queryInfo: {
        name: "",
        phone_number: "",
        id_card: "",
        page: 1, //当前页
        size: 10, //每页最大数
      },
      total: 0, //总记录数
      //显示/隐藏添加用户栏
      dialogFormVisible: false,
      //添加vip表单数据
      addform: {
        name: "",
        phone_number: "",
      },
      //表单宽度
      formLabelWidth: "120px",

      //修改用户信息
      updateForm: {
        id_card: "",
        name: "",
        phone_number: "",
        integral: "",
        shipping_time: "",
      },
      //显示/隐藏修改用户栏
      updateDialogVisible: false,
      //修改表单验证
      updateFormRulues: {
        name: [
          { required: true, message: "请输入会员名称", trigger: "blur" },
          { min: 1, max: 8, message: "长度在1到8个字符", trigger: "blur" },
        ],
        phone_number: [
         
          { min: 11, max: 11, message: "电话为11位号码", trigger: "blur" },
        ],
      },
      addRules: {
        name: [
          { required: true, message: "请输入会员名称", trigger: "blur" },
          { min: 1, max: 8, message: "长度在1到8个字符", trigger: "blur" },
        ],
        phone_number: [
       
          { min: 11, max: 11, message: "电话为11位号码", trigger: "blur" },
        ],
      },
      deleteIds: [],
    };
  },
  methods: {
    //获取所有会员
    async getVip() {
      // const { data: res } = await this.$http.get("vip", {
      //   params: this.queryInfo,
      // });
      // this.total = res.numbers;
      // this.tableData = res.data;
      // this.$store.commit("VIPCOUNT", this.total);
      // console.log(this.$store);
      getVipList(this.queryInfo).then((res)=>{
        this.total = res.total;
        this.tableData = res.data;
      })
    },
    
    //最大数
    handleSizeChange(newSize) {
      this.queryInfo.size = newSize;
      this.getVip();
    },
    //pageNum的触发动作
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getVip();
    },

    async addVip() {
      this.dialogFormVisible = false;
      createVip(this.addform).then(()=>{
        this.$message.success("操作成功！");
        this.getVip();
        this.addform={}
      })
      this.$refs.addFormRef.resetFields();
    },

    //删除vip用户
    async deleteVip(id) {
      const confirmResult = await this.$confirm(
        "此操作将会永久删除vip用户，是否继续？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult != "confirm") {
        return this.$message.info("已取消删除");
      }
      delVip(id).then(()=>{
        this.$message.success("操作成功！");
        this.getVip();
      })
      // const { data: res } = await this.$http.post("deleteVip?id=" + id);
      // if (res != "success") {
      //   return this.$message.error("操作失败！");
      // }
      
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.deleteIds = selection.map((item) => item.id);
      console.log(this.deleteIds);
    },
    //批量删除
    batchDelete(rows) {
      console.log(rows);
      if (rows.length !== 0) {
        this.$confirm("是否确认删除这" + rows.length + "条数据?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          batchDelVip(rows).then(()=>{
            this.$message.success("删除成功");
            this.getVip();
          })
          
        });
      } else {
        this.$message.error("未选择数据！");
      }
    },

    showUpdateDialog(id) {
      this.updateDialogVisible = true;
      // this.updateForm = currentData;
      getVipDetail(id).then((res)=>{
        this.updateForm = res;
      })
    },
    closeUpdateDialog() {
      this.updateDialogVisible = false;
      this.getVip();
    },
    //确认修改
    async updateVip() {
      editVip(this.updateForm.id,this.updateForm).then(()=>{
        this.$message.success("编辑成功！");
        this.getVip();
      })
      this.updateDialogVisible = false;
      
    },
    addDialogClose() {
      this.$refs.addFormRef.resetFields();
    },
  },
  created() {
    this.getVip();
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.vip {
  margin: 0 10px;
}
h1 {
  font-size: 24px;
  font-weight: 400;
  padding-bottom: 10px;
  color: #565758;
}
.search {
  .el-input {
    width: 150px;
    margin-right: 20px;
    margin-bottom: 40px;
  }
}

.el-button {
  background: #4064e1;
  color: white;
}
.table {
  .pagination {
    width: 400px;
    margin: 10px auto;
  }
}
</style>
